import { AtButton, AtForm, AtInput, AtAvatar, AtList, AtListItem, AtFab, AtActionSheet, AtActionSheetItem, AtTabBar } from 'taro-ui';
import React from 'react';
import Taro from '@tarojs/taro'
import config from '../../config.json'
import { View } from '@tarojs/components';
import './userCenter.less'
class userCenter extends React.Component<any, any>{
    constructor(props) {
        super(props);
        this.state = {
            inviteCode: '',
            info: {
                name: '',
                department: '',
                phone: '',
                note: '',
                authority: '',
                email: ''
            },
            inviteActIsOpened: false,
            modPassActIsOpened: false,
            newPass: "",
            newPassA: "",
            current: 1,
            count: Taro.getStorageSync("count")?Taro.getStorageSync("count"):0
        }
    }
    componentDidMount() {
        let _this = this;
        Taro.request({
            url: config.domainName + '/user/get',
            method: "GET",
            data: {},
            header: {
                token: Taro.getStorageSync('token'),
            },
            success(res) {
                if (res.data.code === 0) {
                    _this.setState({
                        info: res.data.data
                    })
                    console.log(res.data.data);
                } else {
                    Taro.showToast({
                        title: '服务器异常',
                        icon: "error" as any
                    })
                }
            }
        })
    }
    createInviteCode = (authority: number) => {
        let _this = this;
        Taro.request({
            url: config.domainName + '/code/create?authority=' + authority,
            method: "GET",
            data: {},
            header: {
                token: Taro.getStorageSync('token'),
            },
            success(res) {
                if (res.data.code === 0) {
                    _this.setState({
                        code: res.data.data,
                    })
                    Taro.setClipboardData({
                        data: _this.state.code,
                        success() {
                            Taro.getClipboardData({
                                success(res) {
                                    console.log(res);
                                    Taro.showToast({
                                        title: '已复制到粘贴板',
                                        icon: "success" as any
                                    })
                                }
                            })

                        }
                    })
                } else {
                    Taro.showToast({
                        title: '服务器异常',
                        icon: "error" as any
                    })
                }
            }
        })
    }

    handleClickTabBar(index) {
        if (index === 0 && index !== this.state.current) {
            Taro.navigateTo({ url: "/pages/index/index" });
        }
    }

    render() {
        return (
            <View style={{marginBottom: "5rem"}}>
                <View className="box">

                    <AtAvatar
                        circle
                        text={this.state.info.name}
                        size={'large'}
                        className="shortcut"
                    />
                </View>

                <AtList>
                    <AtListItem
                        title={"姓名: " + this.state.info.name}
                    />
                    <AtListItem
                        title={"系部: " + this.state.info.department}
                    />
                    <AtListItem
                        title={"电话: " + this.state.info.phone}
                    />
                    <AtListItem
                        title={"备注: " + this.state.info.note}
                    />
                    <AtListItem
                        title={"邮箱: " + this.state.info.email}
                    />
                    {this.state.info.authority === 1
                        ? <AtListItem title={'生成邀请码'} arrow='right' onClick={() => { this.setState({ inviteActIsOpened: true }) }} />
                        : <AtListItem title={'输入邀请码'} arrow='right' onClick={() => { Taro.navigateTo({ url: '/pages/enterInvitedCode/enterInvitedCode' }) }} />
                    }
                    <AtListItem
                        title={'关于我们'}
                        arrow="right"
                        onClick={() => {
                            Taro.navigateTo({
                                url: '/pages/aboutUs/aboutUs',
                            })
                        }}
                    />
                    <AtListItem
                        title={'修改密码'}
                        arrow="right"
                        onClick={() => {
                            this.setState({
                                modPassActIsOpened: true
                            });
                        }}
                    />
                    <AtListItem
                        title={'登出'}
                        arrow="right"
                        onClick={() => {
                            Taro.removeStorageSync("token");
                            Taro.navigateTo({
                                url: "/pages/login/login"
                            });
                        }}
                    />
                </AtList>
                <AtActionSheet isOpened={this.state.inviteActIsOpened} cancelText='取消' title='生成邀请码'>
                    <AtActionSheetItem onClick={this.createInviteCode.bind(this, 2)}>
                        普通管理员
                    </AtActionSheetItem>
                    <AtActionSheetItem onClick={this.createInviteCode.bind(this, 1)}>
                        超级管理员
                    </AtActionSheetItem>
                </AtActionSheet>
                <AtActionSheet isOpened={this.state.modPassActIsOpened} cancelText='取消' title='修改密码'>
                    <AtInput type="password" name="pwd" placeholder="新密码" onChange={(value) => {
                        this.setState({
                            newPass: value
                        });
                    }}></AtInput>
                    <AtInput type="password" name="pwd" placeholder="确认新密码" onChange={(value) => {
                        this.setState({
                            newPassA: value
                        });
                    }}></AtInput>
                    <AtActionSheetItem onClick={async () => {
                        if (this.state.newPass === this.state.newPassA) {
                            let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
                            let newPass = this.state.newPass;
                            if (reg.test(newPass)) {
                                let res = await Taro.request({
                                    url: config.domainName + "/user/update",
                                    method: "POST",
                                    data: {
                                        pwd: newPass
                                    },
                                    header: {
                                        "token": Taro.getStorageSync("token")
                                    }
                                });
                                if (!res.data.code) {
                                    Taro.showToast({
                                        title: "修改成功"
                                    });
                                    setTimeout(() => {
                                        Taro.removeStorageSync("token");
                                        Taro.navigateTo({
                                            url: "/pages/login/login"
                                        });
                                    }, 1000);
                                } else {
                                    Taro.showToast({
                                        title: res.data.msg,
                                        icon: "none"
                                    });
                                }
                            } else {
                                Taro.showToast({
                                    title: "密码至少包含：数字和英文字母，长度6-20",
                                    icon: "none"
                                });
                            }
                        } else {
                            Taro.showToast({
                                title: "两次输入密码不一致",
                                icon: "none"
                            });
                        }
                    }}>
                        确定
                    </AtActionSheetItem>
                </AtActionSheet>

                <View
                    className='edit at-icon at-icon-edit'
                    style={{
                        position: "fixed",
                        right: "50px",
                        bottom: "80px",
                        fontSize: "30px",
                        padding: "10px",
                        color: "#888",
                        border: "1px solid #eee",
                        borderRadius: "50%",
                        boxShadow: "0 0 10px 5px #eee"
                    }}
                    onClick={() => {
                        Taro.navigateTo({
                            url: '/pages/userinfo/userinfo?flag=1',
                        })
                    }}
                ></View>
                <AtTabBar
                    className="tabbar"
                    fixed
                    tabList={[
                        { title: '菜单', iconType: 'bullet-list', text: this.state.count ? this.state.count : null },
                        { title: '个人空间', iconType: 'user' }
                    ]}
                    onClick={this.handleClickTabBar.bind(this)}
                    current={this.state.current}
                />

            </View>

        )
    }

}
export default userCenter;